<template>
  <div id="App">
    <MyButton :value="value" :size="size" :type="type" @click="showDialog = true"></MyButton>
    <MyDialog
      v-model="showDialog"
      :showTooltip.sync="showTooltip"
      :title="title"
      @handleTip="showTip"
    ></MyDialog>
    <MyTooltip ref="myTip" :showTooltip.sync="showTooltip"></MyTooltip>
  </div>
</template>

<script>
import MyButton from "./components/MyButton.vue";
import MyDialog from "./components/MyDialog.vue";
import MyTooltip from "./components/MyTooltip.vue";
export default {
  data() {
    return {
      value: "确定",
      size: "large",
      type: "danger",
      showDialog: false,
      title: "确定关闭吗?",
      showTooltip: false
    };
  },
  components: {
    MyButton,
    MyDialog,
    MyTooltip
  },
  methods: {
    showTip() {
      this.$refs.myTip.show("操作成功");
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #ccc;
}
</style>